<template>
	<div style="background-color: #001432;">
		<div id="header">
			<img src="../../img/header.png" style="width: 1280px;">
			<p id="time"></p>
		</div>
		<el-row :gutter="24">
			<el-col :span="4">
				<div id="pie" style="width: 400px;height: 300px;margin-top: 10px;z-index: 9999;">
				</div>
				<div id="line" style="width: 400px;height: 300px;z-index: 9999;">
				</div>
			</el-col>
			<el-col :span="12">
				<div>

				</div>
			</el-col>
			<el-col :span="6">
				<div v-for="(chartText, index) in chartTexts" :key="index">
					<div :id="`bar-${index}`" style="width: 400px; height: 200px; z-index: 9999;"></div>
					<AqiBarChart :text="chartText" :containerId="`bar-${index}`"></AqiBarChart>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import AqiBarChart from './AqiBarChart.vue';
	import {
		reactive,
		ref,
		inject,
		onMounted
	} from 'vue';
	import ECharts from 'vue-echarts'
	import * as echarts from 'echarts';
	const axios = inject("axios");
	const aqiLevelsList = reactive([]);
	const overAirSumS = reactive([]);
	const chartTexts = [
		'二氧化硫（SO2）浓度超标统计',
		'一氧化碳（CO）浓度超标统计',
		'悬浮颗粒物（PM2.5）浓度超标统计'
	];


	// 初始化 ECharts 图表实例
	async function fetchAqiData() {
		let url = "/api/statistic/aqiLevel";
		await axios.get(url).then((r) => {
			if (r.data.ok) {
				r.data.data.aqiLevelVO.forEach((level, index) => {
					const singleAqiLevel = reactive({
						name: '',
						value: ''
					});
					singleAqiLevel.name = level.aqiExplain;
					singleAqiLevel.value = level.aqiSum;
					aqiLevelsList.push(singleAqiLevel);
				});
				initializeChart();
			}
		});
	}

	function initializeChart() {
		let myCharts = echarts.init(document.getElementById('pie'));
		let option = {
			title: {
				text: '空气质量指数级别分布',
				left: '50%',
				textStyle: { // 设置文字样式
					fontSize: 14, // 字体大小
					fontWight: 700,
					color: '#fff'
				},
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: "left",
				top: "center",
				itemGap: 10, // 图例项之间的间距
				padding: [20, 10], // 图例内边距，用于增大整体空间
				textStyle: { // 设置文字样式
					fontSize: 10, // 字体大小
					fontWight: 700
				},
			},
			series: [{
				type: 'pie',
				radius: ['0', '50%'], // 这里设置了内外半径的比例，单位是百分比
				center: ['60%', '50%'], // 饼图居中显示
				data: aqiLevelsList.map(level => ({
					name: level.name,
					value: level.value
				}))
			}]
		};
		myCharts.setOption(option);
	}
	async function fetchAirData() {
		let url = "/api/statistic/aqiAirQuality";
		axios.get(url).then((r) => {
			if (r.data.ok) {
				// moth = r.data.data.aqiAirQuality;
				r.data.data.aqiAirQuality.forEach((air, index) => {
					const singleAirLevel = reactive({
						name: '',
						value: ''
					});
					singleAirLevel.name = air.month;
					singleAirLevel.value = air.aqiSum;
					overAirSumS.push(singleAirLevel);

				});
				console.log(overAirSumS);
				initializeChartOfLine();
			}
		})
	}

	function initializeChartOfLine() {
		let myCharts = echarts.init(document.getElementById('line'));
		let xAxisData = overAirSumS.map(item => item.name);
		let seriesData = overAirSumS.map(item => item.value);
		let option = {
			title: {
				text: '12个月内空气质量指数超标趋势',
				left: 'center',
				textStyle: { // 设置文字样式
					fontSize: 14, // 字体大小
					fontWight: 700,
					color: '#fff'
				},
			},
			xAxis: {
				type: 'category',
				data: xAxisData
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: seriesData,
				type: 'line',
				smooth: true
			}]
		};
		myCharts.setOption(option);
	}

	onMounted(async () => {
		await fetchAqiData();
		await fetchAirData();
	});
</script>

<style scoped>
	/* 	#header {
		display: flex;
		justify-content: space-around;
		align-items: center;
	} */

	.el-row {
		margin-bottom: 20px;
	}
</style>